import React,{useState,useEffect} from 'react'
import {Image, StyleSheet, Text, TextInput, TouchableOpacity, View,Keyboard} from 'react-native';
import screen from '../utils/screen';
import Constants from '../utils/Constants';
import Images from '../images/Images';
import {FontFamily, getffly} from '../utils/common';

export default  ({codeText= '',onSend,sendTime,onNext})=>{

    const [phone,setPhone] = useState('')
    const [code,setCode] = useState(codeText)
    const [psw,setPsw] = useState('')
    const [referralCode,setReferralCode] = useState('')
    const [enable,setEnable] = useState(false)
    const [read,setRead] = useState(false)
    const [eyeOpen,setEyeOpe] = useState(false)

    useEffect(()=>{
        setCode(codeText)
    },[codeText])

    useEffect(()=>{
        setEnable(checkEnable())
    },[phone,psw,code,read])

    useEffect(()=>{

    },[])

    const checkEnable = ()=>{
        if(!read) return false
        if(!phone.length) return false
        if(!code.length) return false
        if(!psw.length)  return false
        return true
    }


    return (
        <View style={{width:'100%',marginTop:screen.PIXEL_30}}>

            <Text style={styles.mobileTitle}>{Constants.login.mobile_title}</Text>

            <View style={styles.inputWrap}>
                <TextInput
                    keyboardType='numeric'
                    allowFontScaling={false}
                    placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                    placeholder={Constants.login.mobile_login}
                    style={ styles.mobileInput}
                    value={phone}
                    onChangeText={(text) => {
                        setPhone(text)
                    }}
                />

                {
                    phone.length > 0 ? (
                        <TouchableOpacity
                            style={styles.clearBtn}
                            onPress={()=>{
                                setPhone('')
                            }}
                        >
                            <Image source={Images.clear} style={{width:screen.PIXEL_15,height:screen.PIXEL_15}}/>
                        </TouchableOpacity>
                    ):null
                }

            </View>

            <Text style={[styles.mobileTitle,{marginTop:screen.PIXEL_40}]}>{Constants.login.verification_code}</Text>

            <View style={styles.codeInputWrap}>
                <TextInput
                    keyboardType='numeric'
                    allowFontScaling={false}
                    placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                    placeholder={Constants.login.verification}
                    style={ styles.codeInput}
                    value={code}
                    onChangeText={(text) => {
                        setCode(text)
                    }}
                />

                {
                    sendTime <= 0 ? (
                        <TouchableOpacity
                            style={styles.sendBtn}
                            onPress={  ()=> onSend(phone)   }
                        >
                            <Text style={{color:'#377C74',fontSize:20,}}>{Constants.login.send_code}</Text>
                        </TouchableOpacity>
                    ):(
                        <View
                            style={[styles.sendBtn,{borderColor:'#C8C8C8' }]}
                        >
                            <Text style={{color:'#C8C8C8',fontSize:20,}}>{sendTime}s</Text>
                        </View>
                    )
                }


            </View>

            <Text style={[styles.mobileTitle,{marginTop:screen.PIXEL_40}]}>{Constants.login.password}</Text>

            <View style={styles.inputWrap}>
                <TextInput
                    allowFontScaling={false}
                    placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                    placeholder={Constants.login.password}
                    style={ styles.mobileInput}
                    value={psw}
                    secureTextEntry={!eyeOpen}
                    onChangeText={(text) => {
                        setPsw(text)
                    }}
                />

                <TouchableOpacity
                    style={styles.eyeBtn}
                    onPress={()=>{
                        setEyeOpe(!eyeOpen)
                    }}
                >
                    <Image source={eyeOpen ? Images.eye_open : Images.eye_close}
                           resizeMode={'contain'}
                           style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}/>
                </TouchableOpacity>

            </View>

            <Text style={[styles.mobileTitle,{marginTop:screen.PIXEL_40}]}>{Constants.login.referral_code}</Text>

            <View style={styles.inputWrap}>
                <TextInput
                    keyboardType='numeric'
                    allowFontScaling={false}
                    placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                    placeholder={Constants.login.referral_code}
                    style={ styles.mobileInput}
                    value={referralCode}
                    onChangeText={(text) => {
                        setReferralCode(text)
                    }}
                />



            </View>

            <View style={{marginTop:screen.PIXEL_30,flexDirection:'row',alignItems:'center'}}>
                <TouchableOpacity
                    onPress={()=>{
                        setRead(!read)
                    }}
                >
                    <Image source={read ? Images.choosed : Images.choose_no}
                           resizeMode={'contain'}
                           style={{width:screen.PIXEL_30,height:screen.PIXEL_30}}
                    />
                </TouchableOpacity>
                <Text style={{color:'#000',fontSize:12,marginLeft:screen.PIXEL_20}}>{Constants.login.agree_to_the}</Text>
            </View>

            {
                enable?(
                    <TouchableOpacity
                        style={[styles.nextBtn,{backgroundColor: '#377C74'}]}
                        onPress={()=>{
                            let data = {phone,code,referralCode,psw}
                            onNext && onNext(data)
                        }}
                    >
                        <Text style={{color:'#fff',fontSize:16}}>{Constants.login.continue}</Text>
                    </TouchableOpacity>
                ):(
                    <View
                        style={styles.nextBtn}
                    >
                        <Text style={{color:'#fff',fontSize:16}}>{Constants.login.continue}</Text>
                    </View>
                )
            }



        </View>
    )

}

const styles = StyleSheet.create({

    mobileTitle:{
        fontSize:12,color:'#000',fontFamily:getffly(FontFamily.regular)
    },
    inputWrap:{
        width:'100%',
        height:screen.PIXEL_90,
        flexDirection:'row',
        borderBottomWidth:1,
        borderBottomColor:'rgba(32,32,32,0.3)'
    },
    codeInputWrap:{
        width:'100%',
        height:screen.PIXEL_90,
        flexDirection:'row',
    },
    mobileInput:{
        fontFamily: getffly(FontFamily.bold),
        flex:1,
        fontSize:20,
        color:'#377C74',
        marginRight:screen.PIXEL_60
    },
    codeInput:{
        fontFamily: getffly(FontFamily.bold),
        width:'100%',
        fontSize:20,
        color:'#000',
        marginRight:10,
        borderBottomWidth:1,
        borderBottomColor:'rgba(32,32,32,0.3)'
    },
    clearBtn:{
        width:screen.PIXEL_50,
        height:screen.PIXEL_50,
        position:'absolute',
        right:0,
        top:screen.PIXEL_20,
        justifyContent: 'center',
        alignItems:'center'
    },
    eyeBtn:{
        width:screen.PIXEL_50,
        height:screen.PIXEL_50,
        position:'absolute',
        right:0,
        top:screen.PIXEL_20,
        justifyContent: 'center',
        alignItems:'center'
    },
    eyeImage:{
        width:screen.PIXEL_40,height:screen.PIXEL_40
    },
    pswInput:{

    },
    sendBtn:{
        width:screen.PIXEL_160,
        height:screen.PIXEL_90,borderWidth:2,
        borderColor:'#377C74',borderRadius: screen.PIXEL_20,
        justifyContent: 'center',
        alignItems:'center'
    },
    nextBtn:{
        height:screen.PIXEL_90,width:'100%',backgroundColor:'#C8C8C8',justifyContent:'center',alignItems:'center',
        marginTop:screen.PIXEL_30,borderRadius:screen.PIXEL_20
    }
})
